*{
  margin: 0;
  padding: 0;
}
html,body{
  background: #ecf0f5;
}

// 头部
.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #00a65a;
  color: white;
  span{
    padding:2vw 5vw;
  }
  p{
    padding:2vw 5vw;
  }
  .menu-icon{
		width: 8vw;
		height: 1.3vw;
		border-top: 1.3vw solid white;
		border-bottom:1.3vw solid white;
		background-color: white;
    padding: 1.3vw 0;
    background-clip:content-box;
	}
}
// 侧边导航
#canvas-warp{
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  // 导航
  .nav{
    width: 70vw;
    height: 100vh;
    background: #222d32;
    .nav-ul{
      margin-top: 10vw;
      font-size: 18px;
      color: white;
      li{
        padding: 4vw;
      }
      .son-nav{
        margin-top: 2vw;
        font-size: 16px;
        a{
          color: white;
          text-decoration: none;
        }
      }
    }
  }
  // 遮罩
  .mask{
    width: 30vw;
    height: 100vh;
    background: #222e33;
    opacity: 0.8;
  }
}
// 
.content{
  // background: #ecf0f5;
  padding: 8vw 4vw;
  .content-box{
    background: white;
    border: 1px solid #ddd;
    border-radius: 9px;
    .title{
      font-size: 18px;
      padding: 4vw;
      background: #f5f5f5;
      border-bottom: 1px solid #ddd;
    }
    .content-box-con{
      margin: 4vw;
      padding: 2vw;
      border-radius: 6px;
      // background: white;
      background: #f5f5f5;
      div{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 2vw 0;
        span{
          display: inline-block;
          width: 30%;
          text-align: right;
        }
        input{
          width: calc(60% - 8vw);
          height: 8vw;
          outline: none;
          border: 1px solid #333;
          padding: 0 4vw;
          color: #999;
          font-size: 16px;
          border-radius: 6px;
        }
        select{
          width: 62%;
          height: 8vw;
          outline: none;
          border: 1px solid #333;
          color: #999;
          font-size: 16px;
          border-radius: 6px;
          background: white;
          // padding: 0 4vw;
        }
      }
    }
    .content-box-btn{
      margin: 4vw;
      padding: 2vw;
      border-radius: 6px;
      background: #f5f5f5;
      text-align: center;
      display: flex;
      justify-content: space-between;
      align-items: center;
      button{
        padding:2vw 4vw;
        font-size: 14px;
        background: #3c8dbc;
        border-radius: 6px;
        color: white;
        border: none;
      }
    }
    .content-box-table{
      margin: 4vw;
      padding: 2vw;
      border-radius: 6px;
      background: #f5f5f5;
      .table{
        overflow-x: auto;
        table{
          tr{
            th{
              font-weight: inherit;
              font-size: 16px;
              padding: 2vw 4vw;
              white-space:nowrap;
            }
            td{
              white-space:nowrap;
              padding: 2vw 4vw;
              font-size: 16px;
              text-align: center;
              background: white;
              button{
                width: 25vw;
                height: 10vw;
                border: none;
                color: white;
                border-radius: 9px;
                background: #3c8dbc;
              }
              &>button:last-child{
                background: #dd4b39;
              }
            }
          }
        }
      }
      
      .page-container{
        margin: 4vw 2vw;
        text-align: center;
        ul{
          // overflow: hidden;
          display: inline-block;
        }
      }
    }
  }
}